<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
<link rel="stylesheet" href="StyleSheets/gadgets.css">
<script type="text/javascript" src="Scripts/jQuery/jquery-1.2.2.js"></script>
<script type="text/javascript" src="Scripts/jQuery/ui/ui.mouse.js"></script>
<script type="text/javascript" src="Scripts/jQuery/ui/ui.draggable.js"></script>
<script type="text/javascript" src="Scripts/jQuery/ui/ui.droppable.js"></script>
<script type="text/javascript" src="Scripts/jQuery/ui/ui.sortable.js"></script>
<script type="text/javascript" src="Scripts/jQuery/interface.js"></script>
</head>
<body>
<div id="sort1" class="column">
	<div class="gadgets">
			<div class="gadgets-gadget-title-bar">
				<span id="remote_module_1_title" class="gadgets-gadget-title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a href="#" onclick="gadgets.container.getGadget(1).handleOpenUserPrefsDialog()" class="gadgets-gadget-title-button">settings</a> <a href="#" onclick="gadgets.container.getGadget(1).handleToggle()" class="gadgets-gadget-title-button">toggle</a></span>
			</div>
			<div id="remote_module_1_userPrefsDialog" class="gadgets-gadget-user-prefs-dialog"> </div>
			<div class="gadgets-gadget-content">
				<B>HAI</B>
			</div>
		</div>
</div>
<div id="sort2" class="column">
	<div class="gadgets">
			<div class="gadgets-gadget-title-bar">
				<span id="remote_module_1_title" class="gadgets-gadget-title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a href="#" onclick="gadgets.container.getGadget(1).handleOpenUserPrefsDialog()" class="gadgets-gadget-title-button">settings</a> <a href="#" onclick="gadgets.container.getGadget(1).handleToggle()" class="gadgets-gadget-title-button">toggle</a></span>
			</div>
			<div id="remote_module_1_userPrefsDialog" class="gadgets-gadget-user-prefs-dialog"> </div>
			<div class="gadgets-gadget-content">
				<B>HAI</B>
			</div>
		</div>

</div>
<div id="sort3" class="column">
	<div class="gadgets">
			<div class="gadgets-gadget-title-bar">
				<span class="gadgets-gadget-title" id="remote_module_1_title">Arun B</span> | <span class="gadgets-gadget-title-button-bar"><a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(1).handleOpenUserPrefsDialog()" href="#">settings</a> <a class="gadgets-gadget-title-button" onclick="gadgets.container.getGadget(1).handleToggle()" href="#">toggle</a></span>
			</div>
			<div class="itemContent">
				<iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FSetTitle1.xml&synd=gadgets&mid=1&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_1" id="remote_module_1"> </iframe>
			</div>
		</div>
	<div class="gadgets" id="shop">
		<div class="gadgets-gadget-title-bar" style="-moz-user-select: none;">Shopping<a class="closeEl" href="#">[-]</a></div>
		<div class="itemContent">
			<iframe scrolling="no" frameborder="0" src="http://127.0.0.1:8080/gadgets/ifr?url=http%3A%2F%2Flocalhost%2FiGoogle%2Fxml%2FSetTitle2.xml&synd=gadgets&mid=1&parent=&ogc=localhost" class="gadgets-gadget" name="remote_module_1" id="remote_module_1"> </iframe>
		</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(
	function () {
		$('a.closeEl').bind('click', toggleContent);
		$('div.column').Sortable(
			{
				accept: 'gadgets',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.gadgets-gadget-title-bar',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{
					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{
					$.iAutoscroller.stop();
				}
			}
		);
	}
);
var toggleContent = function(e)
{
	var targetContent = $('div.itemContent', this.parentNode.parentNode);
	if (targetContent.css('display') == 'none') {
		targetContent.slideDown(300);
		$(this).html('[-]');
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
	}
	return false;
};
function serialize(s)
{
	serial = $.SortSerialize(s);
	alert(serial.hash);
};
</script>
<div  class="serializer">
<a href="#" onClick="serialize(); return false;" >serialize all lists</a>
<a href="#" onClick="serialize('sort1'); return false;" >serialize list 1</a>
<a href="#" onClick="serialize('sort2'); return false;" >serialize list 2</a>
<a href="#" onClick="serialize('sort3'); return false;" >serialize list 3</a>

<a href="#" onClick="serialize(['sort1', 'sort3']); return false;" >serialize lists 2 and 3</a>
</div>
	
</body>
</html>